<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
    <link rel="stylesheet" type="text/css" href="fontPlus/iconfont.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>

    <style type="text/css">
    	.mui-slider-indicator .mui-indicator{background: #FFFFFF;}
    	.mui-slider-indicator .mui-active.mui-indicator{background: #5763FF;}
    	.mui-card-content img{display: block;height: 165px;}
    	.mui-slider-indicator .mui-active.mui-indicator{box-shadow: none;}
    	.mui-card{box-shadow: none;}
    	.mui-card-footer:before, .mui-card-header:after{background: none;}
    	.titleCenter span{margin: 0 5px;}
    	.mui-table-view:before{background: none;}
    	.mui-table-view:after{background: none;}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
	<!--slider-->
	<div id="slider" class="mui-slider" >
	  <div class="mui-slider-group mui-slider-loop">
	    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
	    <!--<div class="mui-slider-item mui-slider-item-duplicate">
	      <a href="productDetails.html">
	        <img src="image/banner11.png">
	      </a>
	    </div>-->
	    <!-- 第一张 -->
	    <!--<div class="mui-slider-item">-->
	      <!--<a href="productDetails.html">
	        <img src="image/banner1.png">
	      </a>-->
	    <!--</div>-->
	    <!-- 第二张 -->
	    <!--<div class="mui-slider-item">
	      <a href="productDetails.html">
	        <img src="image/banner2 (2).png">
	      </a>
	    </div>-->
	    <!-- 第三张 -->
	    <!--<div class="mui-slider-item">
	      <a href="productDetails.html">
	        <img src="image/banner11.png">
	      </a>
	    </div>-->
	    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
	    <!--<div class="mui-slider-item mui-slider-item-duplicate">
	      <a href="productDetails.html">
	        <img src="image/banner1.png">
	      </a>
	    </div>-->
	  </div>
	  <div class="mui-slider-indicator">
	    <div class="mui-indicator mui-active"></div>
	    <div class="mui-indicator"></div>
	    <div class="mui-indicator"></div>
	  </div>
	</div>
	<!--content-->
	<div class="mui-content">
		<p class="titleCenter"></p>
		<!--cardMedia-->
		<div class="mui-card" style="width: 90%;margin: 15px auto;">
			<div class="mui-card-content"></div>
			<div class="mui-card-footer"></div>
		</div>
		<div class="mui-card" style="width: 90%;margin: 15px auto;">
			<div class="mui-card-content"></div>
			<div class="mui-card-footer"></div>
		</div>
		<p class="titleCenter"></p>
		<ul class="mui-table-view mui-grid-view"></ul>
	</div>
	<nav class="mui-bar mui-bar-tab foot_nav">
		<!--<a class="mui-tab-item mui-active" id="indexHtml" href="index.html">
			<span class="mui-icon iconfont icon-iconfonthome0"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" id="orderHtml" href="order_form.html">
			<span class="mui-icon iconfont icon-dingdan"></span>
			<span class="mui-tab-label">订单</span>
		</a>
		<a class="mui-tab-item" id="myHtml" href="register.html">
			<span class="mui-icon iconfont icon-weibiaoti-_huabanfuben"></span>
			<span class="mui-tab-label">我的</span>
		</a>-->
	</nav>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	//轮播
	setTimeout(function(){
		var gallery = mui('.mui-slider');
		gallery.slider({
		  interval:2000//自动轮播周期，若为0则不自动播放，默认为0；
		});
	},500)
	
	mui('body').on('tap','a',function(){
        window.top.location.href = this.href;
    })
	
</script>
<script type="text/javascript">
	var heightAuto=$('.mui-slider-item a img').width()*0.5;
//	console.log(heightAuto);
	$('.mui-slider-item a img').height(heightAuto);
	var heightImgAuto=$('.mui-card-content').height();
//	console.log(heightImgAuto);
	$('.mui-card-content img').css('display','block');
	$('.mui-card-content img').height(heightImgAuto);
</script>
<script type="text/javascript">
	var a = localStorage.state;
	var b = localStorage.data;
	if(a == 1){
		$.ajax({
			type: "post",
			url: "http://mall.itcn99.com/i/index/nav",
			dataType: "jsonp",
			async: true,
		//					jsonp: "callback",  //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名,默认为callback
		//					jsonpCallback: "userHandler",  //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
			data: {
		
			},
			success: function(data) {
					console.log(data);
				var nav_url = data.data[0]["nav_url"];
				var nav_url1 = data.data[1]["nav_url"];
				var nav_url2 = data.data[2]["nav_url"];
				console.log
				var title = data.data[0]["title"];
				var title1 = data.data[1]["title"];
				var title2 = data.data[2]["title"];
				$(".foot_nav").html("").append('<a class="mui-tab-item mui-active" id="indexHtml" href="'+nav_url+'.html"><span class="mui-icon iconfont icon-iconfonthome0"></span><span class="mui-tab-label">'+title+'</span></a><a class="mui-tab-item" id="orderHtml" href="'+nav_url1+'.html"><span class="mui-icon iconfont icon-dingdan"></span><span class="mui-tab-label">'+title1+'</span></a><a class="mui-tab-item" id="myHtml" href="'+nav_url2+'.html"><span class="mui-icon iconfont icon-weibiaoti-_huabanfuben"></span><span class="mui-tab-label">'+title2+'</span></a>')
			}
		})
	}else{
		//项目底部导航接口
		$.ajax({
			type: "post",
			url: "http://mall.itcn99.com/i/index/nav",
			dataType: "jsonp",
			async: true,
	//					jsonp: "callback",  //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名,默认为callback
	//					jsonpCallback: "userHandler",  //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
			data: {
			
			},
			success: function(data) {
					console.log(data);
				var nav_url = data.data[0]["nav_url"];
				var title = data.data[0]["title"];
				var title1 = data.data[1]["title"];
				var title2 = data.data[2]["title"];
				$(".foot_nav").html("").append('<a class="mui-tab-item mui-active" id="indexHtml" href="'+nav_url+'.html"><span class="mui-icon iconfont icon-iconfonthome0"></span><span class="mui-tab-label">'+title+'</span></a><a class="mui-tab-item" id="orderHtml" href="order_form.html"><span class="mui-icon iconfont icon-dingdan"></span><span class="mui-tab-label">'+title1+'</span></a><a class="mui-tab-item" id="myHtml" href="register.html"><span class="mui-icon iconfont icon-weibiaoti-_huabanfuben"></span><span class="mui-tab-label">'+title2+'</span></a>')
			}
		})
	}
	
//	首页商品分类名称接口
	$.ajax({
		type: "post",
		url: "http://mall.itcn99.com/i/index/type_name",
		dataType: "jsonp",
		async: true,
//					jsonp: "callback",  //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名,默认为callback
//					jsonpCallback: "userHandler",  //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
		data: {
			
		},
		success: function(data) {
				console.log(data);
			var dataLen = data.data.length;
//			console.log(dataLen)
			var str="";
			for(var i=0; i<dataLen;i++){
					console.log(data.data[i]["bank_name"])
				str='<span>—</span>'+data.data[i]["bank_name"]+'<span>—</span>'
				$('.titleCenter').eq(i).append(str);	
			}
		}
	})
	
//	图片轮播接口
 	$.ajax({
		type: "post",
		url: "http://mall.itcn99.com/i/index/banner",
		dataType: "jsonp",
		async: true,
//					jsonp: "callback",  //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名,默认为callback
//					jsonpCallback: "userHandler",  //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
		data: {

		},
		success: function(data) {
				console.log(data);
			var dataLen = data.data.length;
				
				var str="";
				var box='<div class="mui-slider-item mui-slider-item-duplicate"><a href="'+data.data[2]["img_url"]+'"><img src="'+data.data[2]["img"]+'"></a></div>';
				var box1= '<div class="mui-slider-item mui-slider-item-duplicate"><a href="'+data.data[0]["img_url"]+'"><img src="'+data.data[0]["img"]+'"></a></div>';
			for(var i=0; i<dataLen;i++){
//					console.log(data.data[i]["bank_name"])
				str='<div class="mui-slider-item"><a href="'+data.data[i]["img_url"]+'"><img src="'+data.data[i]["img"]+'"></a></div>'
				$('.mui-slider-group').append(str);	
			}
			
			$('.mui-slider-group').append(box1);
			$('.mui-slider-group').prepend(box);
		}
	})
// 	热门商品接口
$.ajax({
		type:"post",
		url:"http://mall.itcn99.com/i/index/goods_list1",
		async:true,
		dataType:'jsonp',
		success:function(data) {
			console.log(data.data)
			var strImg='';
			var strTitie='';
			for (var i=0;i<data.data.length;i++) {
				strImg='<a href="productDetails.html?id='+data.data[i]["id"]+'" ><img src="'+data.data[i].goods_img+'" alt="" width="100%"></a>'
				strTitie='<a class="mui-card-link colorFont16">'+ data.data[i].goods_name+'</a><a class="mui-card-link colorUnify">￥'+data.data[i].goods_price+'元</a>'
				$('.mui-card-content').eq(i).append(strImg)
				$('.mui-card-footer').eq(i).append(strTitie)
				console.log(data.data[i]["id"])
			}
		}
	});
//	最新商品接口
	$.ajax({
		type:"post",
		url:"http://mall.itcn99.com/i/index/goods_list2",
		async:true,
		dataType:'jsonp',
		success:function(data){
			console.log(data.data)
			var str ='';
			for (var i=0;i<data.data.length;i++) {
				str+='<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="productDetails.html?id='+data.data[i]["id"]+'"><img class="mui-media-object" src="'+data.data[i].goods_img+'" ><div class="mui-media-body colorFont21">'+data.data[i].goods_name+'</div><div class="mui-media-body colorUnify">￥'+data.data[i].goods_price+'元</div></a></li>'
			}
			$('.mui-table-view').append(str);
			var Imgwidth=$('.mui-media-object').css('width');
			$('.mui-media-object').css('height',Imgwidth);
		}
	});
</script>
</html>